<template>
    <div id="app">
        <div id="allmap" class="map"></div>
    </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {}
    },
    mounted() {
        // 百度地图API功能. 将获取地理位置的代码放到mounted钩子函数里面就可以了。
        var map = new BMap.Map('allmap', {
            enableMapClick: false
        }) // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5) // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

        map.setMapStyle({
            style: 'midnight'
        })

        var randomCount = 1000

        var data = []

        var citys = [
            '北京',
            '天津',
            '上海',
            '重庆',
            '石家庄',
            '太原',
            '呼和浩特',
            '哈尔滨',
            '长春',
            '沈阳',
            '济南',
            '南京',
            '合肥',
            '杭州',
            '南昌',
            '福州',
            '郑州',
            '武汉',
            '长沙',
            '广州',
            '南宁',
            '西安',
            '银川',
            '兰州',
            '西宁',
            '乌鲁木齐',
            '成都',
            '贵阳',
            '昆明',
            '拉萨',
            '海口'
        ]

        // 构造数据
        while (randomCount--) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(
                citys[parseInt(Math.random() * citys.length)]
            )
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [
                        cityCenter.lng - 2 + Math.random() * 4,
                        cityCenter.lat - 2 + Math.random() * 4
                    ]
                },
                count: 30 * Math.random(),
                time: 100 * Math.random()
            })
        }

        var dataSet = new mapv.DataSet(data)

        var options = {
            size: 13,
            gradient: {
                0.25: 'rgb(0,0,255)',
                0.55: 'rgb(0,255,0)',
                0.85: 'yellow',
                1.0: 'rgb(255,0,0)'
            },
            max: 60,
            animation: {
                type: 'time',
                stepsRange: {
                    start: 0,
                    end: 100
                },
                trails: 10,
                duration: 4
            },
            draw: 'heatmap'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options)
    }
}
</script>

<style lang="less">
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height: 100%;
}

#allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
    background-color: rgb(243, 241, 236);
    color: rgb(0, 0, 0);
    text-align: left;
}
</style>
